<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input style="width:100%;" placeholder="请输入账号模糊查询" v-model="queryParam.username"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入姓名模糊查询" v-model="queryParam.nickname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <div>
      <vxe-grid
        id="UserList"
        ref="vxeTable"
        v-bind="gridOptions"
        v-on="listeners"
      >
      <template #action="{ row }">
        <template>
          <a @click="handleStart(row)" >提交</a>
          <a-divider type="vertical" />
          <a @click="handleFlowDetail(row)" >审批详情</a>
        </template>
      </template>
    </vxe-grid>
    </div>
    <TaskPendingModal ref="taskModal" type="history" />
  </a-card>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import TaskPendingModal from '@/pages/flow/task/modules/TaskPendingModal'
import { processStart } from '@/services/bpmn'
import { getAction, putAction } from '@/services/manage'
import { CURY_TYPE } from '@/store/mutation-types'
import Criteria from '@/utils/criteria'
import { OPERATOR } from '@/store/mutation-types'
export default {
  name: 'UserList',
  components: {
    TaskPendingModal
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        {
          title: '字典编码',
          field: 'dictCode',
          sortable: true
        },
        {
          title: '字典名称',
          field: 'dictName'
        },
        {
          title: '默认值',
          field: 'dictDefaultValue'
        },
        {
          title: '描述',
          field: 'dictDesc'
        },
        {
          title: '字典类别',
          field: 'dictType',
          slots: { default: ({ row }) => {
            return row.dictType === '1' ? '系统字典' : '业务字典'
          } }
        },
        {
          title: '流程状态',
          field: 'bpmnStatus'
        },
        {
          title: '流程实例id',
          field: 'processInstanceId'
        },
        { title: '操作', slots: { default: 'action' }, width: 170 }
      ],
      url: {
        list: '/sys/dict/tree/page',
        task: '/camunda/process/list/',
        save: '',
        getOrderById: '' // 根据数据主键获取审批行数据接口
      },
      toolbarConfig: {
        buttons: [],
        import: false
      }
    }
  },
  methods: {
    async handleFlowDetail(row) { // 查看流程进度
      // 根据流程实例id获取流程信息--begin
      const res = await getAction(this.url.task + row.processInstanceId)// '27ea1e76-b669-11ee-9ca4-a8934a88565a'
      if (res.success) {
        const taskData = res.result
        taskData.processInstanceId = taskData.id
        this.$refs.taskModal.show(taskData)
      }
      // 根据流程实例id获取流程信息--end
    },
    async handleStart(row) { // 发起流程
      this.$confirm({
        title: '确认提交',
        content: '是否提交选中数据?',
        onOk: () => {
          this.start(row)
        }
      })
    },
    async start(row) {
      this.closeMessage = this.$message.loading('发起中..', 0)
      try {
        // 流程发起 -begin
        const res = await processStart('test4', { // 1、test4为配置的流程编码 2、row.id 为行数据主键
          businessKey: row.dictCode,
          ...row // 若流程实例中不使用业务单数据时，该数据可不传
        })
        if (!res.success) {
          return this.$message.warning(res.message)
        }
        // 流程发起 ---end

        // 更新业务表审批状态及流程实例ID -begin
        row.bpmnStatus = 'ACTIVE' // 更新行数据状态
        row.processInstanceId = res.result // 更新行数据审批实例id
        row.crudType = CURY_TYPE.UPDATE // 更新行数据脏数据状态
        const res2 = await putAction(this.url.save, row)
        if (res2.success) {
          this.$message.success('操作成功')
          this.loadData()
        } else {
          this.$message.warning(res2.message)
        }
        // 更新业务表审批状态及流程实例ID -end

        this.closeMessage()
      } catch (error) {
        this.closeMessage()
      }
    }
  }
}
</script>

